<template>
  <div>
    <el-table :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="类型" />
      <el-table-column
        v-for="key in columns"
        :key="key"
        :label="`${key}条数据耗时`"
      >
        <template #default="scope">
          <span>{{ getTime(scope.row.type, key) }}</span>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div style="margin-top: 15px">
    <el-form label-width="200px">
      <el-form-item label="数据个数">
        <el-input v-model.number="count">
          <template #append>
            <el-button @click="setRandomTree">重新设置数据</el-button>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <!-- <el-button @click="toTreeByRecursion">使用递归实现</el-button>
        <el-button type="primary" @click="toTreeBtMap"
          >不使用递归实现</el-button
        > -->
        <el-button @click="toTree">转换为树结构</el-button>
        <el-button @click="toArray">树结构扁平化</el-button>
      </el-form-item>
    </el-form>
  </div>
  <div>
    <router-view></router-view>
  </div>
</template>
<script setup>
import {
  generateRandomTree,
  arrayToTreeByRecursion,
  arrayToTreeByMap,
  treeToArrayByRecursion,
} from "/utils/tree";
import { reactive, ref } from "vue";

import { ElMessageBox } from "element-plus";

let count = ref(1000);

let columns = reactive([count.value]);

let tableData = reactive([
  {
    name: "不用递归实现转树结构",
    type: "map",
    times: [
      {
        count: count.value,
        start: "",
        end: "",
        time: "",
      },
    ],
  },
  {
    name: "递归实现转树结构",
    type: "recursion",
    times: [
      {
        count: count.value,
        start: "",
        end: "",
        time: "",
      },
    ],
  },
  {
    name: "递归实现扁平化",
    type: "recursion_2",
    times: [
      {
        count: count.value,
        start: "",
        end: "",
        time: "",
      },
    ],
  },
]);

let randomTree = generateRandomTree(count.value);

function getTime(type, thisCount) {
  let time = tableData
    .find((el) => el.type == type)
    ?.times?.find((el) => thisCount == el.count)?.time;
  return time ? `${time}ms` : "";
}

function setTimes(type, key, thisCount) {
  let times = tableData.find((el) => el.type == type).times;
  let item = times.find((el) => thisCount == el.count);
  if (!item) {
    item = {
      count: thisCount,
      start: "",
      end: "",
      time: "",
    };
    times.push(item);
  }
  if (["start", "end"].includes(key)) {
    item[key] = performance.now();
  }
  if (key == "end") {
    item.time = item.end - item.start;
  }
}

function validator(type, thisCount) {
  let times = tableData.find((el) => el.type == type).times;
  let item = times.find((el) => el.count == thisCount);
  if (item && item.time) {
    ElMessageBox.alert(`已存在${thisCount}的耗时数据`, "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "确认",
    });
    return false;
  }
  return true;
}

function toTreeBtMap() {
  if (!validator("map", randomTree.length)) {
    return;
  }
  setTimes("map", "start", randomTree.length);
  let tree = arrayToTreeByMap(randomTree);
  setTimes("map", "end", randomTree.length);
  console.log("不递归输出的树结构=====>", tree);
}

function toTreeByRecursion() {
  if (!validator("recursion", randomTree.length)) {
    return;
  }
  setTimes("recursion", "start", randomTree.length);
  let tree = arrayToTreeByRecursion(randomTree);
  setTimes("recursion", "end", randomTree.length);
  console.log("递归输出的树结构=====>", tree);
}

function setRandomTree() {
  if (columns.includes(count.value)) {
    ElMessageBox.alert(`已存在${count.value}的数据,不需要重新设置`, "提示", {
      // if you want to disable its autofocus
      // autofocus: false,
      confirmButtonText: "确认",
    });
    return;
  }
  columns.push(count.value);
  randomTree = generateRandomTree(count.value);
}

function toTree() {
  toTreeBtMap();
  toTreeByRecursion();
}

function toArray() {
  let tree = arrayToTreeByMap(randomTree);
  setTimes("recursion_2", "start", randomTree.length);

  let array = treeToArrayByRecursion(tree);
  setTimes("recursion_2", "end", randomTree.length);
  console.log(array);
}
</script>
<style lang="less"></style>